/*
 * Block Header
 * Used for Heading outside the Cards.
 */
.block-header {
  margin-top: 22px;
  @media screen and (min-width: @screen-sm-min) {
    padding: 0 22px;
  }

  @media screen and (max-width: @screen-sm-max) {
    padding: 0 18px;
  }

  margin-bottom: 25px;
  position: relative;

  & > h2 {
    font-size: 15px;
    color: #777;
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;

    & > small {
      display: block;
      text-transform: none;
      margin-top: 8px;
      margin-bottom: 20px;
      color: #9E9E9E;
      line-height: 140%;
    }
  }

  .actions {
    position: absolute;
    right: 10px;
    top: -5px;
    z-index: 4;
  }
}

/*
 * Header Actions
 */
.actions {
  list-style: none;
  padding: 0;
  z-index: 3;
  margin: 0;

  & > li {
    display: inline-block;
    vertical-align: baseline;
  }

  & > li > a,
  & > a {
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    padding-top: 5px;

    & > i {
      color: #adadad;
      font-size: 20px;
    }

    &:hover {
      & > i {
        color: #000;
      }
    }

    .hover-pop(rgba(0, 0, 0, 0.1), 50%, 250ms, 0);
  }

  & > li.open,
  &.open {
    & > a {
      & > i {
        color: #000;
      }

      &:before {
        .scale(1);
        .opacity(1);
      }
    }
  }

  &.actions-alt {
    & > li {
      & > a > i {
        color: #fff;

        &:hover {
          color: #fff;
        }
      }

      &.open {
        & > a {
          & > i {
            color: #fff;
          }
        }
      }
    }
  }

  &.open {
    z-index: 3;
  }
}

/*
 * Collapse Menu Icons
 */
.line-wrap {
  width: 18px;
  height: 12px;
  .transition(all);
  .transition-duration(300ms);
  margin: 12px 20px;

  .line {
    width: 18px;
    height: 2px;
    .transition(all);
    .transition-duration(300ms);

    &.center {
      margin: 3px 0;
    }
  }
}

&.open {
  .line-wrap {
    .rotate(180deg);

    .line {
      &.top {
        width: 12px;
        transform: translateX(8px) translateY(1px) rotate(45deg);
        -webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
      }

      &.bottom {
        width: 12px;
        transform: translateX(8px) translateY(-1px) rotate(-45deg);
        -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
      }
    }
  }
}

/*
 * Load More
 */
.load-more {
  text-align: center;
  margin-top: 30px;

  a {
    padding: 5px 10px 3px;
    display: inline-block;
    background-color: @m-red;
    color: #FFF;
    border-radius: 2px;
    white-space: nowrap;

    i {
      font-size: 20px;
      vertical-align: middle;
      position: relative;
      margin-top: -2px;
    }

    &:hover {
      background-color: darken(@m-red, 10%);
    }
  }
}

.animate-repeat {
  &.ng-enter-stagger {
    .transition-delay(120ms);
    .transition-duration(0s);
  }
  &.ng-move,
  &.ng-enter {
    .transition(500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all);
  }
  &.ng-move,
  &.ng-enter {
    .scaleY(0);
    opacity: 0;
  }

  &.ng-move.ng-move-active,
  &.ng-enter.ng-enter-active {
    .scaleY(1);
    opacity: 1;
  }

}
@-webkit-keyframes tabFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes tabFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.tabFadeInDown {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-name: tabFadeInDown;
  animation-name: tabFadeInDown;
}

@-webkit-keyframes tabFadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes tabFadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.tabFadeInUp {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: tabFadeInUp;
  animation-name: tabFadeInUp;
}

md-progress-circular[md-loading] {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 5px;
  margin: -200px 0 0 -25px;
}

.pagination-container {
  overflow: hidden;
  background: #FAFAFA;
  .pagination {
    clear: both;
    margin: 10px 20px 10px 20px;
    .md-button.md-fab.md-mini {
      margin: 0 3px;
      line-height: 38px;
      width: 38px;
      height: 38px;
    }
  }
}

.md-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.btn-group {
  label {
    &::before {
      content: '\f26c';
      font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
      display: inline-block;
      margin-right: 8px;
    }
    &.active::before{
      content: '\f26e';
    }
  }
}
